<template>
    <!-- #ifdef APP-NVUE -->
    <cell>
        <!-- #endif -->
        <view :hover-class="!clickable && !link ? '' : 'uni-list-chat--hover'" class="uni-list-chat"
              @click.stop="onClick">
            <view :class="{ 'uni-list--border': border, 'uni-list-chat--first': isFirstChild }"></view>
            <view class="uni-list-chat__container">
                <view class="uni-list-chat__header-warp">
                    <view v-if="avatarCircle || avatarList.length === 0" class="uni-list-chat__header"
                          :class="{ 'header--circle': avatarCircle }">
                        <image class="uni-list-chat__header-image" :src="avatar" mode="aspectFill"></image>
                    </view>
                    <!-- 头像组 -->
                    <view v-else class="uni-list-chat__header">
                        <view v-for="(item, index) in avatarList" :key="index" class="uni-list-chat__header-box"
                              :class="computedAvatar"
                              :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }">
                            <image class="uni-list-chat__header-image"
                                   :style="{ width: imageWidth + 'px', height: imageWidth + 'px' }" :src="item.url"
                                   mode="aspectFill"></image>
                        </view>
                    </view>
                </view>
                <view v-if="badgeText && badgePositon === 'left'" class="uni-list-chat__badge uni-list-chat__badge-pos"
                      :class="[isSingle]">
                    <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}</text>
                </view>
                <view class="uni-list-chat__content">
                    <view class="uni-list-chat__content-main">
                        <text class="uni-list-chat__content-title uni-ellipsis">{{ title }}</text>
                        <text class="uni-list-chat__content-note uni-ellipsis">{{ note }}</text>
                    </view>
                    <view class="uni-list-chat__content-extra">
                        <slot>
                            <text class="uni-list-chat__content-extra-text">{{ time }}</text>
                            <view v-if="badgeText && badgePositon === 'right'" class="uni-list-chat__badge"
                                  :class="[isSingle, badgePositon === 'right' ? 'uni-list-chat--right' : '']">
                                <text class="uni-list-chat__badge-text">{{ badgeText === 'dot' ? '' : badgeText }}
                                </text>
                            </view>
                        </slot>
                    </view>
                </view>
            </view>
        </view>
        <!-- #ifdef APP-NVUE -->
    </cell>
    <!-- #endif -->
</template>

<script>
    // 头像大小
    const avatarWidth = 45;

    /**
     * ListChat 聊天列表
     * @description 聊天列表,用于创建聊天类列表
     * @tutorial https://ext.dcloud.net.cn/plugin?id=24
     * @property {String}    title                            标题
     * @property {String}    note                            描述
     * @property {Boolean}    clickable = [true|false]        是否开启点击反馈，默认为false
     * @property {String}    badgeText                        数字角标内容
     * @property {String}    badgePositon = [left|right]        角标位置，默认为 right
     * @property {String}    link = [false｜navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈，默认为false
     *  @value false        不开启
     *  @value navigateTo    同 uni.navigateTo()
     *    @value redirectTo    同 uni.redirectTo()
     *    @value reLaunch    同 uni.reLaunch()
     *    @value switchTab    同 uni.switchTab()
     * @property {String | PageURIString}    to            跳转目标页面
     * @property {String}    time                            右侧时间显示
     * @property {Boolean}    avatarCircle = [true|false]        是否显示圆形头像，默认为false
     * @property {String}    avatar                            头像地址，avatarCircle 不填时生效
     * @property {Array}    avatarList                        头像组，格式为 [{url:''}]
     * @event {Function}    click                            点击 uniListChat 触发事件
     */
    export default {
        name: 'UniListChat',
        emits: ['click'],
        props: {
            title: {
                type: String,
                default: ''
            },
            note: {
                type: String,
                default: ''
            },
            clickable: {
                type: Boolean,
                default: false
            },
            link: {
                type: [Boolean, String],
                default: false
            },
            to: {
                type: String,
                default: ''
            },
            badgeText: {
                type: [String, Number],
                default: ''
            },
            badgePositon: {
                type: String,
                default: 'right'
            },
            time: {
                type: String,
                default: ''
            },
            avatarCircle: {
                type: Boolean,
                default: false
            },
            avatar: {
                type: String,
                default: ''
            },
            avatarList: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        // inject: ['list'],
        computed: {
            isSingle() {
                if (this.badgeText === 'dot') {
                    return 'uni-badge--dot';
                } else {
                    const badgeText = this.badgeText.toString();
                    if (badgeText.length > 1) {
                        return 'uni-badge--complex';
                    } else {
                        return 'uni-badge--single';
                    }
                }
            },
            computedAvatar() {
                if (this.avatarList.length > 4) {
                    this.imageWidth = avatarWidth * 0.31;
                    return 'avatarItem--3';
                } else if (this.avatarList.length > 1) {
                    this.imageWidth = avatarWidth * 0.47;
                    return 'avatarItem--2';
                } else {
                    this.imageWidth = avatarWidth;
                    return 'avatarItem--1';
                }
            }
        },
        data() {
            return {
                isFirstChild: false,
                border: true,
                // avatarList: 3,
                imageWidth: 50
            };
        },
        mounted() {
            this.list = this.getForm()
            if (this.list) {
                if (!this.list.firstChildAppend) {
                    this.list.firstChildAppend = true;
                    this.isFirstChild = true;
                }
                this.border = this.list.border;
            }
        },
        methods: {
            /**
             * 获取父元素实例
             */
            getForm(name = 'uniList') {
                let parent = this.$parent;
                let parentName = parent.$options.name;
                while (parentName !== name) {
                    parent = parent.$parent;
                    if (!parent) return false
                    parentName = parent.$options.name;
                }
                return parent;
            },
            onClick() {
                if (this.to !== '') {
                    this.openPage();
                    return;
                }

                if (this.clickable || this.link) {
                    this.$emit('click', {
                        data: {}
                    });
                }
            },
            openPage() {
                if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
                    this.pageApi(this.link);
                } else {
                    this.pageApi('navigateTo');
                }
            },
            pageApi(api) {
                uni[api]({
                    url: this.to,
                    success: res => {
                        this.$emit('click', {
                            data: res
                        });
                    },
                    fail: err => {
                        this.$emit('click', {
                            data: err
                        });
                        console.error(err.errMsg);
                    }
                });
            }
        }
    };
</script>

<style lang="scss">
    $uni-font-size-lg: 16px;
    $uni-spacing-row-sm: 5px;
    $uni-spacing-row-base: 10px;
    $uni-spacing-row-lg: 15px;
    $background-color: #fff;
    $divide-line-color: #e5e5e5;
    $avatar-width: 45px;
    $avatar-border-radius: 5px;
    $avatar-border-color: #eee;
    $avatar-border-width: 1px;
    $title-size: 16px;
    $title-color: #3b4144;
    $title-weight: normal;
    $note-size: 12px;
    $note-color: #999;
    $note-weight: normal;
    $right-text-size: 12px;
    $right-text-color: #999;
    $right-text-weight: normal;
    $badge-left: 0px;
    $badge-top: 0px;
    $dot-width: 10px;
    $dot-height: 10px;
    $badge-size: 18px;
    $badge-font: 12px;
    $badge-color: #fff;
    $badge-background-color: #ff5a5f;
    $badge-space: 6px;
    $hover: #f5f5f5;

    .uni-list-chat {
        font-size: $uni-font-size-lg;
        position: relative;
        flex-direction: column;
        justify-content: space-between;
        background-color: $background-color;
    }

    // .uni-list-chat--disabled {
    // 	opacity: 0.3;
    // }

    .uni-list-chat--hover {
        background-color: $hover;
    }

    .uni-list--border {
        position: relative;
        margin-left: $uni-spacing-row-lg;
        /* #ifdef APP-PLUS */
        border-top-color: $divide-line-color;
        border-top-style: solid;
        border-top-width: 0.5px;
        /* #endif */
    }

    /* #ifndef APP-NVUE */
    .uni-list--border:after {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        background-color: $divide-line-color;
    }

    .uni-list-item--first:after {
        height: 0px;
    }

    /* #endif */

    .uni-list-chat--first {
        border-top-width: 0px;
    }

    .uni-ellipsis {
        /* #ifndef APP-NVUE */
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* #endif */
        /* #ifdef APP-NVUE */
        lines: 1;
        /* #endif */
    }

    .uni-ellipsis-2 {
        /* #ifndef APP-NVUE */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        /* #endif */

        /* #ifdef APP-NVUE */
        lines: 2;
        /* #endif */
    }

    .uni-list-chat__container {
        position: relative;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        flex: 1;
        padding: $uni-spacing-row-base $uni-spacing-row-lg;
        position: relative;
        overflow: hidden;
    }

    .uni-list-chat__header-warp {
        position: relative;
    }

    .uni-list-chat__header {
        /* #ifndef APP-NVUE */
        display: flex;
        align-content: center;
        /* #endif */
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap-reverse;
        /* #ifdef APP-NVUE */
        width: 50px;
        height: 50px;
        /* #endif */
        /* #ifndef APP-NVUE */
        width: $avatar-width;
        height: $avatar-width;
        /* #endif */

        border-radius: $avatar-border-radius;
        border-color: $avatar-border-color;
        border-width: $avatar-border-width;
        border-style: solid;
        overflow: hidden;
    }

    .uni-list-chat__header-box {
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        display: flex;
        width: $avatar-width;
        height: $avatar-width;
        /* #endif */
        /* #ifdef APP-NVUE */
        width: 50px;
        height: 50px;
        /* #endif */
        overflow: hidden;
        border-radius: 2px;
    }

    .uni-list-chat__header-image {
        margin: 1px;
        /* #ifdef APP-NVUE */
        width: 50px;
        height: 50px;
        /* #endif */
        /* #ifndef APP-NVUE */
        width: $avatar-width;
        height: $avatar-width;
        /* #endif */
    }

    /* #ifndef APP-NVUE */
    .uni-list-chat__header-image {
        display: block;
        width: 100%;
        height: 100%;
    }

    .avatarItem--1 {
        width: 100%;
        height: 100%;
    }

    .avatarItem--2 {
        width: 47%;
        height: 47%;
    }

    .avatarItem--3 {
        width: 32%;
        height: 32%;
    }

    /* #endif */
    .header--circle {
        border-radius: 50%;
    }

    .uni-list-chat__content {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        flex: 1;
        overflow: hidden;
        padding: 2px 0;
    }

    .uni-list-chat__content-main {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: space-between;
        padding-left: $uni-spacing-row-base;
        flex: 1;
        overflow: hidden;
    }

    .uni-list-chat__content-title {
        font-size: $title-size;
        color: $title-color;
        font-weight: $title-weight;
        overflow: hidden;
    }

    .uni-list-chat__content-note {
        margin-top: 3px;
        color: $note-color;
        font-size: $note-size;
        font-weight: $title-weight;
        overflow: hidden;
    }

    .uni-list-chat__content-extra {
        /* #ifndef APP-NVUE */
        flex-shrink: 0;
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        margin-left: 5px;
    }

    .uni-list-chat__content-extra-text {
        color: $right-text-color;
        font-size: $right-text-size;
        font-weight: $right-text-weight;
        overflow: hidden;
    }

    .uni-list-chat__badge-pos {
        position: absolute;
        /* #ifdef APP-NVUE */
        left: 55px;
        top: 3px;
        /* #endif */
        /* #ifndef APP-NVUE */
        left: calc(#{$avatar-width} + 10px - #{$badge-space} + #{$badge-left});
        top: calc(#{$uni-spacing-row-base} / 2 + 1px + #{$badge-top});
        /* #endif */
    }

    .uni-list-chat__badge {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        background-color: $badge-background-color;
    }

    .uni-list-chat__badge-text {
        color: $badge-color;
        font-size: $badge-font;
    }

    .uni-badge--single {
        /* #ifndef APP-NVUE */
        // left: calc(#{$avatar-width} + 7px + #{$badge-left});
        /* #endif */
        width: $badge-size;
        height: $badge-size;
    }

    .uni-badge--complex {
        /* #ifdef APP-NVUE */
        left: 50px;
        /* #endif */
        /* #ifndef APP-NVUE */
        width: auto;
        /* #endif */
        height: $badge-size;
        padding: 0 $badge-space;
    }

    .uni-badge--dot {
        /* #ifdef APP-NVUE */
        left: 60px;
        top: 6px;
        /* #endif */
        /* #ifndef APP-NVUE */
        left: calc(#{$avatar-width} + 15px - #{$dot-width} / 2 + 1px + #{$badge-left});
        /* #endif */
        width: $dot-width;
        height: $dot-height;
        padding: 0;
    }

    .uni-list-chat--right {
        /* #ifdef APP-NVUE */
        left: 0;
        /* #endif */
    }
</style>
